digraph {
  compound=true
  graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0]
  node [fontname="Arial", shape=box, margin="0.4,0.3"]
  edge [fontname="Arial"]
  label=<<br /><font point-size="34">API Application - Dynamic</font><br /><font point-size="24">Summarises how the sign in feature works in the single-page application.</font>>

  subgraph cluster_11 {
    margin=25
    label=<<font point-size="24"><br />API Application</font><br /><font point-size="19">[Container: Java and Spring MVC]</font>>
    labelloc=b
    color="#444444"
    fontcolor="#444444"
    fillcolor="#444444"

    12 [id=12,shape=rect, label=<<font point-size="34">Sign In Controller</font><br /><font point-size="19">[Component: Spring MVC Rest Controller]</font><br /><br /><font point-size="24">Allows users to sign in to the<br />Internet Banking System.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
    15 [id=15,shape=rect, label=<<font point-size="34">Security Component</font><br /><font point-size="19">[Component: Spring Bean]</font><br /><br /><font point-size="24">Provides functionality related<br />to signing in, changing<br />passwords, etc.</font>>, style=filled, color="#5d82a8", fillcolor="#85bbf0", fontcolor="#000000"]
  }

  18 [id=18,shape=cylinder, label=<<font point-size="34">Database</font><br /><font point-size="19">[Container: Oracle Database Schema]</font><br /><br /><font point-size="24">Stores user registration<br />information, hashed<br />authentication credentials,<br />access logs, etc.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
  8 [id=8,shape=rect, label=<<font point-size="34">Single-Page<br />Application</font><br /><font point-size="19">[Container: JavaScript and Angular]</font><br /><br /><font point-size="24">Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]

  8 -> 12 [id=32, label=<<font point-size="24">1. Submits credentials to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  12 -> 15 [id=40, label=<<font point-size="24">2. Validates credentials<br />using</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  15 -> 18 [id=44, label=<<font point-size="24">3. select * from users<br />where username = ?</font><br /><font point-size="19">[SQL/TCP]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  18 -> 15 [id=44, label=<<font point-size="24">4. Returns user data to</font><br /><font point-size="19">[SQL/TCP]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  15 -> 12 [id=40, label=<<font point-size="24">5. Returns true if the<br />hashed password matches</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  12 -> 8 [id=32, label=<<font point-size="24">6. Sends back an<br />authentication token to</font><br /><font point-size="19">[JSON/HTTPS]</font>>, style="dashed", color="#707070", fontcolor="#707070"]
}